<template>
  <div class='article-container'>
    <el-form :model="articleForm" :rules="articleFormRules" label-position="right" label-width="85px"  ref="articleFormRef">
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="articleForm.title" autocomplete="off" placeholder="请输入面试技巧文章的标题..."></el-input>
      </el-form-item>
      <el-form-item label="文章内容" prop="articleBody">
        <quill-editor
          v-model="articleForm.articleBody"
          ref="myQuillEditor"
          :options="editorOption"
        ></quill-editor>
      </el-form-item>
      <el-form-item label="视频地址" prop="videoURL">
        <el-input v-model="articleForm.videoURL"  autocomplete="off" placeholder="请输入文章视频地址..."></el-input>
      </el-form-item>
    </el-form>
    <!-- 提交与取消按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="addInterViewVisible = false">取 消</el-button>
      <el-button type="primary" @click="addInterViewConfirm = false">确 定</el-button>
    </div>
  </div>
</template>

<script>
// 导入富文本编辑器配置数据
import { toolbarOptions } from '../utils/toolbarOptions'
export default {
  name: 'ArticleEdit',
  data () {
    return {
      // Form文章信息表单数据
      articleForm: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      // 富文本编辑器配置
      editorOption: {
        placeholder: '请输入面试技巧文章内容...',
        modules: {
          toolbar: toolbarOptions
        },
        theme: 'snow'
      },
      // 表单验证规则
      articleFormRules: {
        title: [{
          required: true,
          message: '文章标题为必填项，请输入标题...',
          trigger: 'blur'
        }],
        articleBody: [{
          required: true,
          message: '文章内容为必填项，请输入内容...',
          trigger: 'blur'
        }]
      }
    }
  }
}
</script>

<style scoped lang='less'>
.article-container {
  /deep/.ql-editor {
    height: 200px;
  }
}
</style>
